<template>
  <table v-show="list && list.length > 0" class="table table-bordered">
    <caption>课程列表</caption>
    <thead>
      <tr>
        <th>ID</th>
        <th class="col-xs-3" colspan="2">课程</th>
        <th colspan="4" class="col-xs-6">详情</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <template v-for="it in list">
        <tr>
          <td rowspan="4">{{it.id}}</td>
          <td class="text-right">名称</td>
          <td class="col-xs-2">{{it.title}}</td>
          <td class="text-right">更新频率</td>
          <td class="col-xs-2">{{it.frequency}}</td>
          <td class="text-right">对应栏目</td>
          <td class="col-xs-2">{{it.topicId}}</td>
          <td rowspan="4" class="text-right">
            <button class="btn btn-sm btn-primary" @click="updateItem(it)">修改</button>
            <button class="btn btn-sm btn-danger" @click="deleteItem(it.id)">删除</button>
          </td>
        </tr>
        <tr>
          <td class="text-right">摘要</td>
          <td>{{it.summary}}</td>
          <td class="text-right">课程亮点</td>
          <td><img v-if="it.highlights" :src="it.highlights"></td>
          <td class="text-right">名师介绍</td>
          <td><img v-if="it.lecturerIntro" :src="it.lecturerIntro"></td>
        </tr>
        <tr>
          <td class="text-right">缩略图</td>
          <td><img v-if="it.listPicUrl" :src="it.listPicUrl"></td>
          <td class="text-right">适宜人群</td>
          <td><img v-if="it.suitableFor" :src="it.suitableFor"></td>
          <td class="text-right">课表</td>
          <td><img v-if="it.timetablePicUrl" :src="it.timetablePicUrl"></td>
        </tr>
        <tr>
          <td class="text-right">封面</td>
          <td><img v-if="it.headPicUrl" :src="it.headPicUrl"></td>
          <td class="text-right">微店链接</td>
          <td><a :href="it.shopUrl">{{it.shopUrl}}</a></td>
          <td class="text-right">微店二维码</td>
          <td><img v-if="it.shopPicUrl" :src="it.shopPicUrl"></td>
        </tr>
      </template>
    </tbody>
  </table>
  <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
</template>
<style src="./list.css" scoped></style>
<script src="./list.js"></script>